# Number Field

<Subtitle>A numeric input element with increment and decrement buttons, and a scrub area.</Subtitle>

<Meta
  name="description"
  content="A high-quality, unstyled React number field component with increment and decrement buttons, and a scrub area."
/>

import { DemoNumberFieldHero } from './demos/hero';

<DemoNumberFieldHero />

## Usage guidelines

- **Form controls must have an accessible name**: The input must have a meaningful label. Prefer using [`<Field>`](/react/components/field) to provide a visible text label and description, or use the `aria-label` attribute as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { NumberField } from '@base-ui-components/react/number-field';

<NumberField.Root>
  <NumberField.ScrubArea>
    <NumberField.ScrubAreaCursor />
  </NumberField.ScrubArea>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>;
```

## API reference

<Reference
  component="NumberField"
  parts="Root, ScrubArea, ScrubAreaCursor, Group, Decrement, Input, Increment"
/>
